<!-- 带资格角的盒子组件 -->
<template>
  <div class="box">
    <div class="header">
      <div class="left">
        <span>{{ boxTitle }}</span>
      </div>
    </div>
    <div class="boxTmain">
      <div class="top">
        <div class="draw">
          <div class="left">作业监控</div>
        </div>
        <div>
          <ul>
            <li>
              <img src="~assets/boardImg/u507.png" />
              <p style="padding: 10px 0px">标注任务量</p>
              <p>
                <span class="span1">{{ this.list.sumAduit }}</span><span class="danwei">个</span>
              </p>
            </li>
            <li>
              <img src="~assets/boardImg/u508.png" />
              <p style="padding: 10px 0px">标注标签量</p>
              <p>
                <span class="span1">{{ this.list.sumAduitItems }}</span><span class="danwei">个</span>
              </p>
            </li>
            <li>
              <img src="~assets/boardImg/u507.png" />
              <p style="padding: 10px 0px">审核任务量</p>
              <p>
                <span class="span1">{{ this.list.sumCheck }}</span><span class="danwei">个</span>
              </p>
            </li>
            <li>
              <img src="~assets/boardImg/u507.png" />
              <p style="padding: 10px 0px">审核标签量</p>
              <p>
                <span class="span1">{{ this.list.sumCheckItems }}</span><span class="danwei">个</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <div class="draw">
          <div class="left">人员监控</div>
        </div>
        <div>
          <ul>
            <li>
              <p style="padding: 4px 0px">标注：<span class="span1">{{ this.personList.operCount }}</span><span class="danwei">人</span></p>
              <!-- <p>
                <span class="span1">{{ this.personList.operCount }}</span><span class="danwei">人</span>
              </p> -->
            </li>
            <li>
              <p style="padding: 4px 0px">审核：<span class="span1">{{ this.personList.checkCount }}</span><span class="danwei">人</span></p>
              <!-- <p>
                <span class="span1">{{ this.personList.checkCount }}</span><span class="danwei">人</span>
              </p> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="rankingList">
        <ul class="tab-tilte">
          <li @click="cur=0"
            :class="{active:cur==0}">质量排行榜</li>
          <li @click="cur=1"
            :class="{active:cur==1}">效率排行榜</li>
          <li @click="cur=2"
            :class="{active:cur==2}">作业排行榜</li>
        </ul>
        <div class="tab-content">
          <div v-show="cur==0"
            class="tablist">
            <li>
              <p class="title">标注作业准确率<span></span></p>
              <div class="divspan"
                v-for="(arr,i) in this.list.qualityAnnoate"
                :key="i">
                <div>
                  <p class="tabimg">{{i+1}}</p>
                  <p class="tabname">{{ arr.userId}} <i></i></p>
                  <p class="tabvalue">{{arr.annotateError}}</p>
                </div>
              </div>
            </li>
            <li>
              <p class="title">审核作业准确率<span></span></p>
              <div class="divspan"
                v-for="(arr1,i) in this.list.qualityAduit"
                :key="'arr1'+i">
                <div>
                  <p class="tabimg">{{i+1}}</p>
                  <p class="tabname">{{ arr1.userId }}<i></i></p>
                  <p class="tabvalue">{{arr1.aduitError}}</p>
                </div>
              </div>
            </li>
          </div>
          <div v-show="cur==1"
            class="tablist">
            <li>
              <p class="title">标注单笔耗时<span></span></p>
              <div class="divspan"
                v-for="(arr2,i) in this.list.efficientLoad"
                :key="'arr2'+i">
                <div>
                  <p class="tabimg">{{i+1}}</p>
                  <p class="tabname">{{ arr2.userId }}<i></i></p>
                  <p class="tabvalue">{{arr2.annotateEfficient}}</p>
                </div>
              </div>
            </li>
            <li>
              <p class="title">审核单笔耗时<span></span></p>
              <div class="divspan"
                v-for="(arr3,i) in this.list.efficientCheck"
                :key="'arr3'+i">
                <div>
                  <p class="tabimg">{{i+1}}</p>
                  <p class="tabname">{{ arr3.userId }}<i></i></p>
                  <p class="tabvalue">{{arr3.aduitEfficient}}</p>
                </div>
              </div>
            </li>
          </div>
          <div v-show="cur==2"
            class="tablist">
            <li>
              <p class="title">标注作业量<span></span></p>
              <div class="divspan"
                v-for="(arr4,i) in this.list.workLoad"
                :key="'arr4'+i">
                <div>
                  <p class="tabimg">{{i+1}}</p>
                  <p class="tabname">{{ arr4.userId }}<i></i></p>
                  <p class="tabvalue">{{arr4.maxAnnotate}}</p>
                </div>
              </div>
            </li>
            <li>
              <p class="title">审核作业量<span></span></p>
              <div class="divspan"
                v-for="(arr5,i) in this.list.checkLoad"
                :key="'arr5'+i">
                <div>
                  <p class="tabimg">{{i+1}}</p>
                  <p class="tabname">{{ arr5.userId }}<i></i></p>
                  <p class="tabvalue">{{arr5.maxAduit}}</p>
                </div>
              </div>
            </li>
          </div>
        </div>
      </div>
    </div>
    <div class="pos pos_bl"></div>
    <div class="pos pos_br"></div>
  </div>
</template>

<script>
import { gettimeMonitor, getPersonMonitor } from "@/api/all.js";
export default {
  props: {
    // 盒子标题
    boxTitle: {
      type: String,
      default: () => {
        return "实时监控";
      }
    }
  },
  data() {
    return {
      cur: 0, //默认选中第一个tab
      timer: null,
      list: {
        sumCheckItems: "", //审核标签数
        aduitError: "", //审核 质量排行榜
        sumAduit: "", //标注题数
        annotateError: "", //标注 质量排行榜
        aduitEfficient: "", // 效率 审核题数
        maxAnnotate: "", //标注题数 作业排行榜
        annotateEfficient: "", //标注题数  效率
        sumCheck: "", //审核题数
        sumAduitItems: "", //标注标签数
        maxAduit: "", //审核题数 作业排行榜
        checkLoad: [
          // { maxAduit: "4009890", userId: "刘聪" },
          // { maxAduit: "1788987", userId: "晨曦" },
          // { maxAduit: "9", userId: "范志毅" }
        ], //作业量审核排名
        // 作业量标注排名
        workLoad: [
          // {
          //   maxAnnotate: "40",
          //   userId: "1"
          // },
          // { maxAnnotate: "17", userId: "2" },
          // { maxAnnotate: "9", userId: "3" }
        ],
        // 效率审核排名
        efficientCheck: [
          // {
          //   aduitEfficient: "34.98765",
          //   userId: "53073212"
          // },
          // { aduitEfficient: "56", userId: "小可爱" },
          // { aduitEfficient: "67", userId: "王老二" }
        ],
        // 效率标注排名
        efficientLoad: [
          // {
          //   annotateEfficient: "54.98765",
          //   userId: "汪洋海洋"
          // },
          // { annotateEfficient: "34.98765", userId: "王二哈" },
          // { annotateEfficient: "32", userId: "王二哈" }
        ],
        // 质量审核排名
        qualityAduit: [
          // {
          //   aduitError: "34.03345%",
          //   userId: "晨曦"
          // },
          // {
          //   aduitError: "20%",
          //   userId: "晨曦"
          // },
          // {
          //   aduitError: "50%",
          //   userId: "晨曦"
          // }
        ],
        // 质量标注排名
        qualityAnnoate: [
          // {
          //   annotateError: "90.99%",
          //   userId: "张小花"
          // },
          // {
          //   annotateError: "49%",
          //   userId: "晨曦"
          // },
          // {
          //   annotateError: "70%",
          //   userId: "哈哈啊哈"
          // }
        ]
      },
      personList: {
        operCount: "",
        checkCount: ""
      }
    };
  },
  methods: {
    // 作业监控数据查询
    async getmonitorList() {
      const res = await gettimeMonitor();
      this.list = res.result;
    },
    // 作业监控数据查询
    async getPersonList() {
      const res = await getPersonMonitor();

      this.personList = res.result;
    }
  },
  created() {
    this.getmonitorList();
    this.getPersonList();
  },
  mounted() {
    this.timer = setInterval(() => {
      this.cur += 1;
      if (this.cur > 2) {
        this.cur = 0; // 循环
      }
      //这里放当前数据
    }, 5000);
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  background: #152149;
  font-size: 14px;
  //   min-height:450px;
  background: url(~assets/boardImg/u135.svg) no-repeat;
  background-size: 100% auto;
  .header {
    height: 30px;
    .left {
      float: left;
      // font-size: 0;
      img {
        height: 30px;
        width: auto;
        vertical-align: bottom;
      }
      span {
        display: inline-block;
        padding-left: 30px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        vertical-align: bottom;
      }
    }
    .right {
      float: right;
      position: relative;
      .btn {
        padding: 0 12px;
        font-size: 14px;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 15px;
        line-height: 28px;
        cursor: pointer;
        img {
          height: 16px;
          width: auto;
          vertical-align: middle;
        }
      }
    }
  }
  .boxTmain {
    height: 450px;
    padding: 10px 0;
    // margin-top: 10px;
    color: #fff;
    font-size: 14px;
    .draw {
      overflow: hidden;
      // background: linear-gradient(
      //   to right,
      //   rgba(96, 152, 232, 1) 0%,
      //   rgba(255, 255, 255, 0) 100%
      // );
      // padding: 8px 20px;
      // box-shadow: 0px 2px 2px #fff;
      background: url(~assets/boardImg/u360.svg) no-repeat;
      background-size: 100%;
      // padding: 2px 20px;
      // box-shadow: 0px 2px 2px #fff;
      // cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      .left {
        float: left;
        font-size: 16px;
        color: #fff;
        padding-left: 50px;
        font-family: "PingFang SC ", "PingFang SC", sans-serif;
        font-weight: 650;
        font-style: normal;
      }
    }
    .span1 {
      font-size: 20px;
      font-weight: 700px;
      font-style: normal;
      color: #00ffff;
      padding-right: 6px;
    }
    .bottom {
      ul {
        display: flex;
        justify-content: space-around;
        padding: 15px 0px;
        text-align: center;
        align-items: center;
        font-size: 14px;
      }
    }
    .top {
      ul {
        display: flex;
        justify-content: space-around;
        padding: 15px 0px;
        text-align: center;
        align-items: center;
        font-size: 14px;
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .rankingList {
      // border: 1px dashed #667aaa;
      // display: block;
      height: 185px;
      background: url(~assets/boardImg/u403.svg) no-repeat;
      background-size: 100% auto;
      ul li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .tab-tilte {
        width: 80%;
        padding-top: 40px;
        padding-left: 50px;
        // background-color: #fff;
        border-radius: 5px;
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
      }
      .tab-tilte li {
        // float: left;
        width: 35%;
        padding: 5px 5px;
        text-align: center;
        background-color: #0c6283;
        cursor: pointer;
        border-radius: 100px;
      }
      /* 点击对应的标题添加对应的背景颜色 */
      .tab-tilte .active {
        background-color: #06d8ed;
        color: #fff;
      }
      .tab-content {
        height: 120px;
        padding: 10px 60px 0 60px;
        .tablist {
          display: flex;
          justify-content: space-around;
          align-items: center;
          text-align: center;
          font-size: 14px;
          // padding-top:18px;
          li {
            list-style: none;
            width: 40%;
            .title {
              padding: 2px 0;
              letter-spacing: 2px;
              // text-align: justify;
              span {
                display: inline-block;
                width: 100%;
              }
            }
            // div {
            //   text-align: left;
            // }
          }
        }
      }
    }
  }
  .divspan {
    font-size: 14px;
    div {
      // letter-spacing: 2px;
      display: flex;
      // justify-content: space-around;
      // text-align: left;
      .tabname {
        color: #fff;
        // padding-right: 20px;
        padding:0px 15px;
        width: 63px;
        text-align: justify;
        i {
          display: inline-block;
          width: 100%;
        }
      }
      .tabvalue {
        color: #00ffff;
      }
      .tabimg {
        width: 15px;
        height: 15px;
        text-align: center;
        align-items: center;
        // border: 1px solid #00ffff;
        // background-color: #fff;
        border-radius: 2px;
        background-color: #ff9900;
      }
    }
  }

  .danwei {
    color: #557fb6;
  }
  .pos {
    position: absolute;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
  }
  .pos_bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #667aaa;
    border-left: 2px solid #667aaa;
  }
  .pos_br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #667aaa;
    border-right: 2px solid #667aaa;
  }
}
</style>
